XPENH's Note

做生活的高手。

Xpenh's avatar Xpenh

ECMAScript 6 新特性

部署进度

目前ES6的支持度已经越来越高了,超过90%的 ES6 语法特性都实现了。关于各大浏览器的最新版本,对 ES6 的支持可以查看kangax.github.io/es5-compat-table/es6/

Node 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。它对 ES6 的支持度更高。除了那些默认打开的功能,还有一些语法功能已经实现了,但是默认没有打开。使用下面的命令,可以查看 Node 已经实现的 ES6 特性。

$ node --v8-options | grep harmony

上面命令的输出结果,会因为版本的不同而有所不同。

使用阮一峰写的工具ES-Checker用来检查各种运行环境对 ES6 的支持情况。访问ruanyf.github.io/es-checker,可以看到您的浏览器支持 ES6 的程度。运行下面的命令,可以查看你正在使用的 Node 环境对 ES6 的支持程度。

$ npm install -g es-checker
$ es-checker

=========================================
Passes 24 feature Dectations
Your runtime supports 57% of ECMAScript 6
=========================================

ES6新特性

let和const关键字

可以把let看成是var,但是let定义的变量被限定在了特定范围内才能使用,而离开了这个范围则无效。
const很直观,用来定义常量,定义的时候必须初始化,不能留到以后再赋值,且与let相同,不存在声明提升,不可重复声明,只在声明所在的块级作用域内有效。more

for(let i = 0; i < 3; i++)console.log(i); // 0,1,2
console.log(i); // undefined,严格模式下会报错

箭头操作符

ES6中新增加了箭头操作符 => 简化了函数function的书写。操作符左边为输入的参数,而右边则是进行的操作以及返回的值:Inputs => outputs
js中的回调函数,每次都需要写function,而引入箭头操作符后可以方便的回调了:

// 数组遍历的几种方法
var arr = [1,2,3];
// 传统写法
arr.forEach(function(v,i,a){
    console.log(v);
})
// ES6
arr.forEach(v => console.log(v));
// for of
for(v of arr){
    console.log(v);
}

类的支持

ES6中添加了对类的支持,引入了class关键字(之前就是保留字),js本身就是面向对象的,ES6中提供的类实际上只是js原型模式的包装。而现在提供原生的class支持后,有两个好处:

  • 1.对象的创建、继承就更加直观了,
  • 2.父类方法的调用、实例化、静态方法和构造函数等概念都更加形象化。
class Animal {
        // es6中新的构造器
        constructor(name){
            this.name = name;
        }
        // 实例方法
        sayName(){
            console.log('my name is' + this.name);
        }
    }
    // 类的继承
    class Programmer extends Animal{
        constructor(name){
            // 直接调用父类的构造器进行初始化
            super(name);
        }
        // 自己的方法
        program(){
            console.log('我是一只老鼠');
        }
    }
    // 测试
    var animal = new Animal('Tom');

    animal.sayname();  // my name is Tom;
    var aniaml2 = new Programmer('Jerry');
    // 父类所有的方法,继承者都可以打点调用

    animal2.sayName();  // my name is Jerry;

    animal2.program();  // 我是一只老鼠

for of 值遍历

for in循环用于遍历数组、类数组或对象,ES6中新引入的for of循环功能相似,不同的是每次循环它提供的不是序号而是值。

var arr = [1,2,3];
for(v in arr){
    console.log(v); // 0,1,2 输出的是索引
}
for(v of arr){
    console.log(v); // 1,2,3 输出的是值
}

Promise

Promise是处理异步操作的一种模式,之前在很多三方库中有实现,比如jQuery的deferred对象,当你发起一个异步请求,并绑定了.wnhe(),.done()等事件处理程序时,其实就是在应用promise模式。

// 创建promise
var promise = new Promise(function(resolve,reject){
    if(/*条件语句*/){
        resolve('yes');
    }else{
        reject(Error('no'));
    }
})
// 绑定处理程序
promise.then(function(result){
    // promise成功执行的语句
    console.log(result); // yes
},function(err){
    // promise失败执行的语句
    console.log(err); // no
})

增强的对象字面量

ES6中对象字面量增强了,写法更加简洁与灵活,同时在定义对象的时候能够做更多的事情,具体表现:

  • 可以在对象字面量里面定义原型
  • 定义方法可以不用function关键字
  • 直接调用父类方法

与上面提到的类的概念更加吻合,编写js面向对象时更加方便。

// 通过对象字面量创建对象
var human = {
    breathe() {
        console.log('呼吸...');
    }
};
var worker = {
// 设置此对象的原型为human,相当于继承human
    __proto__ : human,
    company : 'BAT',
    work() {
        console.log('我在工作...');
    }
};

human.breathe();  // 呼吸...
// 调用继承来的方法
worker.breathe();  // 呼吸...
worker.work();  // 我在工作...

默认参数值

现在可以在定义函数的时候指定参数的默认值

function sayHello(name){
    // 传统方式用或操作符来完成
    var name = name || 'Tom';
    console.log('Hello' + name);
}
// ES6的形式:
function sayHello2(name='Jerry'){
    console.log(`Hello ${name}`);
    // 双反引号``是es6中的字符串模板,$配合{}来使用
}
sayHello(); // Hello Tom
sayHello('汤姆'); // Hello 汤姆
sayHello2(); // Hello Jerry
sayHello2('杰瑞'); // Hello 杰瑞

参考资料

ECMAScript 6 入门 - 阮一峰